<template>
  <el-row>
    <el-form
      :model="fromData"
      label-width="130px"
      :show-message="false"
      :rules="fromDataRules"
      ref="fromData"
      :disabled="redOrderType == '审核红冲订单'"
    >
      <el-form-item label="更换信息类型:">
        <el-radio
          v-model="fromData.replaceType"
          v-for="item in dict.replaceTypeOptions"
          :label="item.value"
          :key="item.value"
        >{{ item.label }}</el-radio>
      </el-form-item>

      <el-row v-if="fromData.replaceType == 1">
        <el-form-item label="备注:" prop="remark">
          <el-input
            type="textarea"
            clearable
            :autosize="{ minRows: 4, maxRows: 4}"
            v-model="fromData.remark"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-row>


      <el-row v-if="fromData.replaceType == 2">
        <el-form-item label="实际车主:" prop="buyerName">
          <el-input
            placeholder="实际车主"
            clearable
            v-model="fromData.buyerName"
          ></el-input>
        </el-form-item>
        <el-form-item label="车主手机:" prop="buyerTel">
          <el-input
            placeholder="车主手机"
            clearable
            v-model="fromData.buyerTel"
          ></el-input>
        </el-form-item>
        <el-form-item label="车主身份证:" prop="buyerAgentIdentity">
          <el-input
            placeholder="车主手机"
            clearable
            v-model="fromData.buyerAgentIdentity"
          ></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row v-if="redOrderType == '申请红冲订单'">
      <el-col
        :span="24"
        align="right"
      >
        <el-button
          type="primary"
          style="margin: 20px auto 0"
          @click="toApply"
        >确认</el-button>
      </el-col>
    </el-row>

    <el-row v-if="redOrderType == '审核红冲订单'">
      <el-col
        :span="24"
        align="right"
      >
        <el-button
          type="primary"
          style="margin: 20px auto 0"
          @click="onSubmit(2)"
        >审核通过</el-button>
        <el-button
          type="primary"
          style="margin: 20px auto 0"
          @click="onSubmit(3)"
        >审核不通过</el-button>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import ElRow from 'element-ui/packages/row/src/row'
import baseMixin from '@/mixins/base'
import {
  addRedOrder,
  seeRedOrder,
  auditRedOrder
} from '@/api/pre-sale/orderManagement/newCar'
export default {
  components: { ElRow },
  name: 'DialogDataForm',
  props: {
    carOrderId: {
      type: Number,
      default: () => null,
    },
    redOrderType: {
      type: String,
      default: () => "",
    },
  },
  mixins: [baseMixin({})],
  data () {
    return {
      //表单项
      dict: {
        replaceTypeOptions: [
          {label: '更换车架号', value: 1},
          {label: '更换车主信息', value: 2},
        ],
      },
      fromData: {
        replaceType: 1,
      },
      fromDataRules: {
        remark: [{ required: true, trigger: 'blur' }],
        buyerTel: [{ required: true, trigger: 'blur' }],
        buyerName: [{ required: true, trigger: 'blur' }],
        buyerAgentIdentity: [{ required: true, trigger: 'blur' }],
      },
    }
  },
  async created () {
    if (this.redOrderType == '审核红冲订单') {
      this.getRedOrderDetail();
    }
  },
  methods: {
    toApply () {
      this.$refs.fromData.validate((valid) => {
        if (valid) {
          this.fromData.carOrderMainId = this.carOrderId;
          addRedOrder(this.fromData).then(response => {
            if (response.success) {
              this.$message.success('操作成功');
              this.$emit('close', true);
            }
          })
        } else {
          return false
        }
      })
    },
    async getRedOrderDetail() {
      const {success, data} = await seeRedOrder(this.carOrderId);
      if (success) {
        this.fromData = Object.assign(this.fromData, data);
      }
    },
    onSubmit(status) {
      auditRedOrder(this.fromData.id, status).then(response => {
        if (response.success) {
          this.$message.success('操作成功');
          this.$emit('close', true);
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
</style>

